<!DOCTYPE html>

<html lang="en-US">
<@common.header/>
<style>
    .carousel-inner div {
        position: absolute;
    }
</style>


<body class="page-sub-page page-property-detail" id="page-top">
<!-- Wrapper -->
<div class="wrapper">
    <!-- Navigation -->
    <@common.nav/><!-- /.navigation -->
    <!-- end Navigation -->
    <!-- Page Content -->
    <div id="page-content">
        <!-- Breadcrumb -->
        <div class="container">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li class="active">房屋属性</li>
            </ol>
        </div>
        <!-- end Breadcrumb -->

        <div class="container">
            <div class="row">
                <!-- Property Detail Content -->
                <div class="col-md-9 col-sm-9">
                    <section id="property-detail">
                        <header class="property-title">
                            <h1>${house.houseName}</h1>
                            <figure>${house.houseRemark}</figure>

                        </header>

                        <!-- 轮播（Carousel）容器 -->
                        <div id="myCarousel" class="carousel slide" style="width: 850px; height: 500px;">
                            <!-- 轮播（Carousel）指标 -->
                            <ol class="carousel-indicators">

                                    <li style="margin-left:20px;" data-target="#myCarousel" data-slide-to="0"
                                        class="active"></li>


                            </ol>
                            <!-- 轮播（Carousel）项目 -->
                            <div class="carousel-inner">


                              <div class="item active">
                                  <img style="height: 500px; width:850px" src="${house.houseImages}" alt="First slide">
                              </div>


                            </div>

                            <!-- 轮播图上的向前一图切换链接 -->
                            <a href="#myCarousel" data-slide="prev" class="left carousel-control">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <!-- 轮播图上的向后一图切换链接 -->
                            <a href="#myCarousel" data-slide="next" class="right carousel-control">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                        <div class="row">
                            <div class="col-md-4 col-sm-12">
                                <section id="quick-summary" class="clearfix">
                                    <header><h2>总体</h2></header>
                                    <div>

                                        <dt>地&nbsp;&nbsp;&nbsp;&nbsp;址： ${house.houseAddress}</dt>
                                        <dt>价&nbsp;&nbsp;&nbsp;&nbsp;格： ${house.housePrice}</dt>
                                        <dt>类&nbsp;&nbsp;&nbsp;&nbsp;型： 销售</dt>
                                        <dt>面&nbsp;&nbsp;&nbsp;&nbsp;积： ${house.houseArea}m<sup>2</sup></dt>
                                        <dt>卧&nbsp;&nbsp;&nbsp;&nbsp;室： ${house.houseBeds}间</dt>
                                        <dt>卫生间：                       ${house.houseBaths}间</dt>

                                    </div>
                                </section><!-- /#quick-summary -->
                            </div><!-- /.col-md-4 -->
                            <div class="col-md-8 col-sm-12">
                                <section id="description">
                                    <header><h2>房屋描述</h2></header>
                                ${house.houseRemark}
                                </section><!-- /#description -->
                            </div><!-- /.col-md-8 -->

                            <div class="col-md-12 col-sm-12">

                                <section id="contact-agent">
                                    <header><h2>联系经纪人</h2></header>
                                    <div class="row">
                                        <section class="agent-form">
                                            <form role="form" id="form-contact-agent" method="get"
                                                  action="/send/email/to/agency" class="clearfix">
                                                <div class="col-md-7 col-sm-12">
                                                    <aside class="agent-info clearfix">
                                                        <figure>
                                                            <a href="/user/agency?userId=${house.userId}">
                                                                <img alt="" src="${agency.userHeadImg}">
                                                            </a>
                                                        </figure>
  <#if Session["loginUser"]?exists>
                        <div class="agent-contact-info">
                            <h3>${agency.userName}</h3>
                            <p>${agency.userAboutMe} </p>
                            <p>手机：${agency.userPhone} </p>
                            <p id="toEmail">邮箱：<a>${agency.userEmail}</a></p>
                            <hr>
                        </div>
  <#else>
    <div class="agent-contact-info">
      <p>请登录查看联系人</p>
    </div>
  </#if>




                                                    </aside><!-- /.agent-info -->
                                                </div><!-- /.col-md-7 -->
                                                <div class="col-md-5 col-sm-12">
                                                    <div class="agent-form">
                                                    </div>
                                            </form><!-- /.agent-form -->
                                    </div><!-- /.col-md-5 -->
                                </section><!-- /.agent-form -->
                            </div><!-- /.row -->
                    </section><!-- /#contact-agent -->


                    <hr class="thick">

                </div><!-- /.col-md-12 -->

            </div><!-- /.row -->
            </section><!-- /#property-detail -->
        </div><!-- /.col-md-9 -->
        <!-- end Property Detail Content -->

        <!-- sidebar -->
        <div class="col-md-3 col-sm-3">
           <@common.search/>
        </div><!-- /.col-md-3 -->
        <!-- end Sidebar -->
    </div><!-- /.row -->
</div><!-- /.container -->
</div>
<!-- end Page Content -->
<!-- Page Footer -->
    <#--<@common.footer/>-->
<!-- end Page Footer -->
</div>
<!-- <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyABT1kCnk8CW4Ckpd0RisUg25PIdDD3Gfg"></script> -->

<@common.js/>

<!--[if gt IE 8]>
<script type="text/javascript" src="/static//js/ie.js"></script>
<![endif]-->
<script type="text/javascript">

    $(".carousel").carousel({
        interval: 2000 //每隔两秒自动轮播
    })

    function searchHouseSider() {


        $(document).ready(function () {
            var houseName = $("#houseName").val();
            // alert(houseName);
            var houseType = $("#houseType").val();
            // alert(houseType)
            window.location.href="/house/list?type="+ houseType +'&orderBy=&keyword=' + houseName

        })

    }


</script>

</body>
</html>